import LogoImg from '@/assets/img/logo_m.png';
import QRImg from '@/assets/img/qrcode.png';

import SideBar from './sideBar';

export default function FooterBlock() {
  const toArticle = (id: number) => {
    window.location.href = `/#/article/${id}`;
  };
  const siteMap: any = [
    {
      title: '关于优T',
      children: [
        { title: '优T介绍', id: '50' },
        { title: '服务条款', id: '51' },
        { title: '隐私条款', id: '52' },
        { title: '法律声明', id: '53' },
      ],
    },
    {
      title: '帮助中心',
      children: [
        { title: '常见问题', id: '54' },
        { title: '售后服务条款', id: '55' },
      ],
    },
    {
      title: '合作联系',
      children: [
        { title: '渠道合作', id: '56' },
        { title: '联系我们', id: '57' },
        { title: '加入我们', id: '58' },
        { title: '工厂合作', id: '59' },
      ],
    },
  ];
  return (
    <>
      <SideBar />
      <div className="relative w-full bg-[#F2F2F2]">
        <div className="relative left-[50%] ml-[-712px] flex w-[1424px] flex-col">
          <div
            className="flex justify-between pb-[48px] pt-[80px]"
            style={{ borderBottom: '0.5px solid #B3B5B9' }}
          >
            <div className="flex gap-[140px] text-[#686B73]">
              {siteMap.map((item: any, index: number) => {
                return (
                  <div className="flex flex-col gap-[15px]" key={index}>
                    <div className="font-weight text-[20px] text-[#363A44]">{item.title}</div>
                    {item.children.map((sub: any, idx: number) => {
                      return (
                        <div className="cursor-pointer" onClick={() => toArticle(sub.id)} key={idx}>
                          {sub.title}
                        </div>
                      );
                    })}
                  </div>
                );
              })}
              <div className="flex flex-col gap-[15px]">
                <div className="font-weight text-[20px] text-[#363A44]">联系我们</div>
                <div>全国统一服务热线 周一至周六 9:00-18:00</div>
                <div className="font-weight text-[20px] text-[#363A44]">400-8781235</div>
              </div>
            </div>
            <div className="flex flex-col">
              <div className="flex gap-[86px] text-[#686B73]">
                <div className="flex flex-col">
                  <img src={QRImg} alt="manager" className="mb-[10px] h-[100px] w-[100px]" />
                  <div>扫码添加招商经理</div>
                </div>
                <div className="flex flex-col">
                  <img src={QRImg} alt="wechat" className="mb-[10px] h-[100px] w-[100px]" />
                  <div>扫码关注公众号</div>
                </div>
              </div>
              <div className="font-weight mt-[35px] flex items-center gap-[10px]">
                <img src={LogoImg} alt="logo" className="h-[38px] w-[38px]" />
                <div>T恤定制</div>
                <div>|</div>
                <div>就上优T</div>
              </div>
            </div>
          </div>
          <div className="flex h-[64px] items-center  justify-between text-[#686B73]">
            <div>T恤定制，就上优T</div>
            <div>|</div>
            <div>地址：中国（浙江）自由贸易试验区金华市义乌市稠江街道新科路E22号A5栋4楼</div>
            <div>|</div>
            <div>备案号：浙ICP备2023019027号-1</div>
            <div>|</div>
            <div>义乌优替供应链有限公司</div>
          </div>
        </div>
      </div>
    </>
  );
}
